import style from "../assets/css/kind.module.scss";
import React, { Component } from "react";
import { getAllBook } from "../axios/api";
import { Tabs, Badge } from "antd-mobile";

class Kind extends Component {
  constructor(props) {
    super(props);
    //声明状态
    this.state = {
      a: [],
    };
    this.getList()
  }

   getList= async ()=>{
     let limi=100
    this.book_ = await getAllBook(null,limi);

    this.res = this.book_.data.data;
   
    this.setState({ a: this.res });
    // console.log(this.res);
  }



  render() {
    return (
      <div className={style.main}>
        <div className={style.haha}>
          <div className={style.title}>
            <i className={"iconfont icon-search"}> </i>
            <input placeholder="输入你要查找的作者" />
            {/* <input
            placeholder="输入你要查找的作者"
            value={wirter}
            onInput={(e) => {
              console.log(1);
              setWirter(e.target.value);
            }}
          /> */}

            <p>书城</p>
          </div>
          {/* 导航 */}
          <div className={style.head}>
            <div>
              <Tabs
                onChange={(key) => console.log(key)}
                style={{
                  "--title-font-size": "15px",
                }}
              >
                <Tabs.Tab title="书架" key="书架"></Tabs.Tab>
                <Tabs.Tab title="书单" key="书单"></Tabs.Tab>
              </Tabs>
            </div>

            <div className={style.sele}>
              <p className="iconfont icon-dui"></p>
              <p>选择</p>
            </div>
          </div>

          <div className={style.nav}>
            <Tabs   defaultActiveKey='all'
              onChange={(key) => {
               
                if ( key==="kind") {
                  this.props.history.push({ pathname: "/list" })
                }
              
              }}
              style={{
                "--title-font-size": "15px",
              }}
            >
              <Tabs.Tab title="默认" key="all"></Tabs.Tab>
              <Tabs.Tab title="分类" key="kind" ></Tabs.Tab>
            </Tabs>
          </div>
          {/* 以上导航 */}
        </div>

        <div className={style.bdy}>
          <div className={style.list}>

{/*             
            <div className={style.wrap}>
              <div>
                <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/812/855812/t6_855812.jpg" />
              </div>
              <p>氨基酸的角adad度讲啊哈</p>
            </div> */}

            { this.state.a.map((item, idx) => {
               
              return (
                <div className={style.wrap} key={idx} onClick={()=>{
                 this.props.history.push({ pathname:'/detail',state:{id:item._id}})
                  console.log(item);
                }}>
                  <div>
                    <img src={item.cover} />
                  </div>
                  <p>{item.name}</p>
                </div>
              );
            })}
          </div>
        </div>

        {/* 底部 */}
        <div className={style.button}>
          <div>
            <i className="iconfont icon-yuedu"></i>
            <p
              onClick={() => {
                this.props.history.push({ pathname: "/" });
              }}
            >
              阅读
            </p>
          </div>
          <div>
            <i className="iconfont icon-shujia"></i>
            <p>书架</p>
          </div>
          <div>
            <i className="iconfont icon-faxian"></i>
            <p
            //   onClick={() => {
            //     history.push("/kind");
            //   }}
            >
              分类
            </p>
          </div>
          <div>
            <i className="iconfont icon-wode"></i>
            <p>我的</p>
          </div>
        </div>
      </div>
    );
  }
}

export default Kind;
